创建物体的两个必要条件
- 几何形状(Geometry)
- 材质(Material)
几何形状
作用
储存一个物体的顶点信息。
基本几何形状
立方体(CubeGeometry)
1 | new THREE.CubeGeometry( |
平面(PlaneGeometry)
并不是数学上无限大小的平面。
1 | new THREE.PlaneGeometry( |
球体(SphereGeometry)
1 | new THREE.SphereGeometry( |

球体
圆形(CircleGeometry)
1 | new THREE.CircleGeometry( |
圆柱体(CylinderGeometry)
正圆柱
圆台
1
2
3
4
5
6
7new THREE.CylinderGeometry(
radiusTop, // 顶面半径
radiusBottom, // 底面半径
height, // 高度
radiusSegments, // 纵向切片数
heightSegments // 横向切片数
);正n面体
- 正四面体(TetrahedronGeometry)
- 正八面体(OctahedronGeometry)
- 正十二面体(IcosahedronGeometry)
1
2
3
4new Three.xxxGeometry(
radius, // 半径
detail // 细节层次,一般使用缺省
);
圆环面(TorusGeometry)
它的形状类似于甜甜圈。
1 | new THREE.TorusGeometry( |

圆环
圆环结(TorusKnotGeometry)
它的形状类似于打了结的甜甜圈。
1 | THREE.TorusKnotGeometry( |
自定义形状
1 | /* |
材质
定义
材质是独立于物体顶点信息之外的与渲染效果相关的属性。
通过修改它,可以改变物体的颜色、纹理贴图、光照模式等。
种类
基本材质(MeshBasicMaterial)
使用基本材质的物体,渲染后不会由于光照产生明暗、阴影效果。
1 | new THREE.MeshBasicMaterial(opt); |
Lambert材质(MeshLambertMaterial)
- 符合Lambert光照模型的材质。
- 只考虑漫反射而不考虑镜面反射。
1 | new THREE.MeshLambertMaterial(opt); |
其光照模型(了解即可):
1
2
3
4
5
6 > Idiffuse = Kd * Id * cos(theta)
> Idiffuse:漫反射光强。
> Kd:物体表面的漫反射属性。
> Id:光强。
> theta:光的入射角弧度。
>
Phong材质(MeshPhongMaterial)
- 既考虑漫反射又考虑镜面反射。
- 其漫反射模型与Lambert相同。
1 | new THREE.MeshPhongMaterial(opt); |
Phong材质镜面反射光照模型(漫反射模型与Lambert相同):
1
2
3
4
5
6
7 > Ispecular = Ks * Is * (cos(alpha))^n
> Ispecular:镜面反射光强
> Ks:材质表面镜面反射系数
> Is:光源强度
> alpha:反射光与视线的夹角
> n:高光系数,值越大则高光系数越小
>
法向材质
将材质的颜色设置为其法向量的方向。
- 其材质颜色与照相机与该物体的角度相关。
1 | new THREE.MeshNormalMaterial(); |
材质的纹理贴图
注意:贴图只有运行在服务器上才能显示出来。
1 | // 创建纹理贴图 |
有哪些物体?
- 最常见:网格(Mesh)
- 其他:线段(Line)、骨骼(Bone)、粒子系统(ParticleSystem)
如何创建物体?
创建物体时,需要指定几何形状和材质。
1 | ]// 如:创建一个网格 |